<template>
  <div>
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>总预订数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ statistics.totalBookings }}</div>
            <div class="label">预订总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>今日预订</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ statistics.todayBookings }}</div>
            <div class="label">今日新增预订</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>总房间数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ statistics.totalRooms }}</div>
            <div class="label">可预订房间总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>入住率</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ statistics.occupancyRate }}%</div>
            <div class="label">当前入住率</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 预订趋势折线图 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>预订趋势</span>
              <el-radio-group v-model="timeRange" size="small" @change="loadBookingTrend">
                <el-radio-button label="week">最近一周</el-radio-button>
                <el-radio-button label="month">最近一月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="bookingTrendChartRef" style="height: 300px"></div>
        </el-card>
      </el-col>

      <!-- 房型预订分布饼图 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>房型预订分布</span>
            </div>
          </template>
          <div ref="roomTypeChartRef" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 酒店预订排行柱状图 -->
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>酒店预订排行</span>
            </div>
          </template>
          <div ref="hotelRankChartRef" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import request from '@/utils/request'
import * as echarts from 'echarts'

// 统计数据
const statistics = reactive({
  totalBookings: 0,
  todayBookings: 0,
  totalRooms: 0,
  occupancyRate: 0
})

// 时间范围选择
const timeRange = ref('week')

// 图表实例
let bookingTrendChart = null
let roomTypeChart = null
let hotelRankChart = null

// 图表DOM引用
const bookingTrendChartRef = ref(null)
const roomTypeChartRef = ref(null)
const hotelRankChartRef = ref(null)

// 加载统计数据
const loadStatistics = async () => {
  const res = await request.get('/statistics/overview')
  if (res.code === '200') {
    Object.assign(statistics, res.data)
  }
}

// 加载预订趋势数据
const loadBookingTrend = async () => {
  const res = await request.get('/statistics/bookingTrend', {
    params: { timeRange: timeRange.value }
  })
  if (res.code === '200') {
    const { dates, counts } = res.data
    bookingTrendChart.setOption({
      xAxis: {
        type: 'category',
        data: dates
      },
      yAxis: {
        type: 'value'
      },
      tooltip: {
        trigger: 'axis'
      },
      series: [{
        data: counts,
        type: 'line',
        smooth: true,
        areaStyle: {}
      }]
    })
  }
}

// 加载房型预订分布
const loadRoomTypeDistribution = async () => {
  const res = await request.get('/statistics/roomTypeDistribution')
  if (res.code === '200') {
    roomTypeChart.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [{
        type: 'pie',
        radius: '50%',
        data: res.data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    })
  }
}

// 加载酒店预订排行
const loadHotelRanking = async () => {
  const res = await request.get('/statistics/hotelRanking')
  if (res.code === '200') {
    const { hotels, bookings } = res.data
    hotelRankChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: hotels,
        axisLabel: {
          interval: 0,
          rotate: 30
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: bookings,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }]
    })
  }
}

// 初始化图表
const initCharts = () => {
  bookingTrendChart = echarts.init(bookingTrendChartRef.value)
  roomTypeChart = echarts.init(roomTypeChartRef.value)
  hotelRankChart = echarts.init(hotelRankChartRef.value)
  
  // 加载数据
  loadBookingTrend()
  loadRoomTypeDistribution()
  loadHotelRanking()
}

// 监听窗口大小变化
window.addEventListener('resize', () => {
  bookingTrendChart?.resize()
  roomTypeChart?.resize()
  hotelRankChart?.resize()
})

onMounted(() => {
  loadStatistics()
  initCharts()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
}

.number {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.label {
  margin-top: 10px;
  color: #909399;
}
</style> 